$(function() {
	$('.container .box .title div h3').click(function() {
		$(this).addClass('active')
		$(this).siblings().removeClass('active')
		let index = $(this).attr('data-index');
		$('.container .content .tabView>div').eq(index).show()
		$('.container .content .tabView>div').eq(index).siblings().hide()
		if (index == 0) {
			getContract()
		} else {
			getReturned()
		}
	})
	sectorSpend = 1;
	getSpendData()
})

function getSpendData() {
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	const currDept = localStorage.getItem("dept");
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=1&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  getCompose(re.items[0].charts[0].data[0])
	  }
	)
	getContract()
	getAddUp()
	getAllSector()

}

function getCompose(data) {
	console.log(data)
	$('.compose-word').html(`<div class="">
									<p>本月发生总额</p>
									<h2>${FormatWYCash(data.key01)}<span>万元</span></h2>
									<div class="contrast">
										<div class="${data.key02>0?'rise':data.key02==0?'fair':'drop'}">
											<img src="${data.key02>0?'assets/images/departmental-charge/arrow-up-filling.svg':data.key02==0?'assets/images/departmental-charge/icon-pingjun@2x.png':'assets/images/departmental-charge/arrow-down-filling.svg'}" >
											<span>${(data.key02 * 100).toFixed(1)}%</span>
										</div>
										<p>较上月</p>
									</div>
								</div>
								<ul>
									<li>
										<p>纵向开支</p>
										<h4>${(data.key03 * 100).toFixed(1)}%</h4>
									</li>
									<li>
										<p>部门研制费</p>
										<h4>${(data.key04 * 100).toFixed(1)}%</h4>
									</li>
									
									<li>
										<p>横向开支</p>
										<h4>${(data.key06 * 100).toFixed(1)}%</h4>
									</li>
									<li>
										<p>部门管理费</p>
										<h4>${(data.key07 * 100).toFixed(1)}%</h4>
									</li>
								</ul>`)
								// <li>
								// 	<p>部门工资</p>
								// 	<h4>${(data.key05 * 100).toFixed(1)}%</h4>
								// </li>
	let seriesData = [{
			value: (data.key03 * 100).toFixed(1),
			name: '纵向开支'
		},
		{
			value: (data.key04 * 100).toFixed(1),
			name: '部门研制费'
		},
		// {
		// 	value: (data.key05 * 100).toFixed(1),
		// 	name: '部门工资'
		// },
		{
			value: (data.key06 * 100).toFixed(1),
			name: '横向开支'
		},
		{
			value: (data.key07 * 100).toFixed(1),
			name: '部门管理费'
		},
	];
	const colorList = ['#165DFF', '#50CD89', '#722ED1', '#FD7E14', '#0DCAF0'];
	have("compose-chart") ? quansuozhichuPie("compose-chart", colorList, seriesData) : "";
}


function getContract() {
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=2&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  let data = re.items[0].charts[0].data[0]
		  $('.container .content .tabView>div').eq(0).find('.word').html(`<div class="">
											<p>本月预计签约</p>
											<h2>${FormatWYCash(data.key01)}<span>万元</span></h2>
											<div class="contrast">
												<div class="${data.key02>0?'rise':data.key02==0?'fair':'drop'}">
													<img src="${data.key02>0?'assets/images/departmental-charge/arrow-up-filling.svg':data.key02==0?'assets/images/departmental-charge/icon-pingjun@2x.png':'assets/images/departmental-charge/arrow-down-filling.svg'}" >
													<span>${(data.key02 * 100).toFixed(1)}%</span>
												</div>
												<p>较上月</p>
											</div>
										</div>
										<div class="">
											<p>本月实际签约</p>
											<h2>${FormatWYCash(data.key03)}<span>万元</span></h2>
											<div class="contrast">
												<div class="${data.key04>0?'rise':data.key04==0?'fair':'drop'}">
													<img src="${data.key04>0?'assets/images/departmental-charge/arrow-up-filling.svg':data.key04==0?'assets/images/departmental-charge/icon-pingjun@2x.png':'assets/images/departmental-charge/arrow-down-filling.svg'}" >
													<span>${(data.key04 * 100).toFixed(1)}%</span>
												</div>
												<p>较上月</p>
											</div>
										</div>`)
	  }
	)
	let yujiData = [];
	let shijiData = [];
	let xData = [];
	let legendData = ['预计签约', '实际签约'];
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=3&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  let data = re.items[0].charts[0].data;
		  for(let i=0;i<data.length;i++){
			  xData.push(data[i].key01)
			   yujiData.push(FormatWYCash(data[i].key02))
			   shijiData.push(FormatWYCash(data[i].key03))
		  }
		  let seriesData = [{
		  		name: "预计签约",
		  		barWidth: "40%",
		  		type: "bar",
		  		data: yujiData,
		  		barGap: 0,
		  		itemStyle: {
		  			color: "#165DFF",
		  		}
		  	},
		  	{
		  		name: "实际签约",
		  		barWidth: "40%",
		  		type: "bar",
		  		barGap: 0,
		  		data: shijiData,
		  		itemStyle: {
		  			color: "#20C997",
		  		}
		  	}
		  ];
		  have("ht-chart") ? monthTrend("ht-chart", seriesData, legendData, xData, 123, 80) : "";
	  }
	)
}


function getReturned() {
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=4&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  let data = re.items[0].charts[0].data[0]
		  $('.container .content .tabView>div').eq(1).find('.word').html(`<div class="">
											<p>本月预计回款</p>
											<h2>${FormatWYCash(data.key01)}<span>万元</span></h2>
											<div class="contrast">
												<div class="${data.key02>0?'rise':data.key02==0?'fair':'drop'}">
													<img src="${data.key02>0?'assets/images/departmental-charge/arrow-up-filling.svg':data.key02==0?'assets/images/departmental-charge/icon-pingjun@2x.png':'assets/images/departmental-charge/arrow-down-filling.svg'}" >
													<span>${(data.key02 * 100).toFixed(1)}%</span>
												</div>
												<p>较上月</p>
											</div>
										</div>
										<div class="">
											<p>本月实际回款</p>
											<h2>${FormatWYCash(data.key03)}<span>万元</span></h2>
											<div class="contrast">
												<div class="${data.key04>0?'rise':data.key04==0?'fair':'drop'}">
													<img src="${data.key04>0?'assets/images/departmental-charge/arrow-up-filling.svg':data.key04==0?'assets/images/departmental-charge/icon-pingjun@2x.png':'assets/images/departmental-charge/arrow-down-filling.svg'}" >
													<span>${(data.key04 * 100).toFixed(1)}%</span>
												</div>
												<p>较上月</p>
											</div>
										</div>`)
	  }
	)
	let yujiData = [];
	let shijiData = [];
	let xData = [];
	let legendData = ['预计回款', '实际回款'];
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=5&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  let data = re.items[0].charts[0].data;
		  for(let i=0;i<data.length;i++){
			  xData.push(data[i].key01)
			   yujiData.push(FormatWYCash(data[i].key02))
			   shijiData.push(FormatWYCash(data[i].key03))
		  }
		  let seriesData = [{
		  		name: "预计回款",
		  		barWidth: "40%",
		  		type: "bar",
		  		data: yujiData,
		  		barGap: 0,
		  		itemStyle: {
		  			color: "#165DFF",
		  		}
		  	},
		  	{
		  		name: "实际回款",
		  		barWidth: "40%",
		  		type: "bar",
		  		barGap: 0,
		  		data: shijiData,
		  		itemStyle: {
		  			color: "#20C997",
		  		}
		  	}
		  ]
		  have("hk-chart") ? monthTrend("hk-chart", seriesData, legendData, xData, 123, 80) : "";
	  }
	)
}

function getAddUp() {
	let yLabel = [];
	let yData = [];
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	const currDept = localStorage.getItem("dept");
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=6&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  let data = re.items[0].charts[0].data;
		  for(let i=0;i<data.length;i++){
		  	yLabel.push(data[i].key01)
		  	 yData.push(FormatWYCash(data[i].key02))
		  }
		  have("lj-chart") ? leijizhichuBar("lj-chart", yLabel, yData) : "";
	  }
	)
	

}

function getAllSector() {
	let $table = $('#all-sector');
	$table.bootstrapTable('destroy');
	$('.container .box.box2').width($('.container .content .wrapper').width() - 52);
	const currYear = localStorage.getItem("year");
	const currMon = localStorage.getItem("month");
	let data ;
	$.get(
	  `${API_URL}getdata?budgetYear=${currYear}&budgetMonth=${currMon}&status=2&chartPage=603&chartNo=7&username=${getUsername}`,
	  {},
	  function (res) {
		  console.log(res)
		  let re = eval("(" + res + ")");
		  console.log(re)
		  data = re.items[0].charts[0].data;
		  $table.bootstrapTable({
		  	data: data,
		  	height: 400,
		  	idField: 'id',
		  	showColumns: false,
		  	fixedColumns: true,
		  	fixedNumber: 1,
		  	showFooter: true,
		  	footerStyle:footerStyle,
		  	columns: [
		  		[{
		  				field: 'key01',
		  				title: '部门',
		  				rowspan: 2,
		  				valign: 'middle',
		  				width: 160,
		  				formatter: blodText,
		  				footerFormatter: total
		  			},
		  			{
		  				// field: 'name',
		  				title: '合同金额',
		  				colspan: 3,
		  				align: 'center',
		  				width: 480,
		  			},
		  			{
		  				// field: 'name',
		  				title: '回款情况',
		  				colspan: 3,
		  				align: 'center',
		  				width: 480,
		  			},
		  			{
		  				field: 'key08',
		  				title: '已出库未入账<br/>资金占用',
		  				rowspan: 2,
		  				sortable: true,
		  				align: 'right',
		  				valign: 'middle',
		  				width: 160,
						formatter:wyText,
		  				footerFormatter: sum
		  			}, 
		  			{
		  				field: 'key09',
		  				title: '部门应收账款',
		  				rowspan: 2,
		  				sortable: true,
		  				align: 'right',
		  				valign: 'middle',
		  				width: 160,
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key10',
		  				title: '总开支',
		  				rowspan: 2,
		  				sortable: true,
		  				align: 'right',
		  				valign: 'middle',
		  				width: 160,
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				// field: 'name',
		  				title: '纵向开支',
		  				colspan: 4,
		  				align: 'center',
		  				width: 640,
		  			},
		  		],
		  		[{
		  				field: 'key02',
		  				title: '预计签约',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key03',
		  				title: '完成情况',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key04',
		  				title: '完成率',
		  				sortable: true,
		  				align: 'right',
		  				formatter: progress,
		  				footerFormatter: sum1
		  			},
		  			{
		  				field: 'key05',
		  				title: '预计签约',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key06',
		  				title: '完成情况',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key07',
		  				title: '完成率',
		  				sortable: true,
		  				align: 'right',
		  				formatter: progress,
		  				footerFormatter: sum1
		  			},
		  			{
		  				field: 'key11',
		  				title: '纵向成本',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key12',
		  				title: '纵向预付款',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key13',
		  				title: '横向成本',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  			{
		  				field: 'key14',
		  				title: '横向预付款',
		  				sortable: true,
		  				align: 'right',
						formatter:wyText,
		  				footerFormatter: sum
		  			},
		  		]
		  
		  	],
		  
		  })
	  }
	)
	
}
function total() {
	return '合计'
}
function sum(data) {
    var field = this.field
    return  FormatWYCash(data.map(function (row) {
      return +row[field]
    }).reduce(function (sum, i) {
      return sum + i
    }, 0))
}
function sum1(data) {
    var field = this.field
	console.log(field)
	let key02=[];
	let key03 = [];
	let key05=[];
	let key06 = [];
	data.map(function(row){
		key02.push(row['key02']>0?parseFloat(row['key02']):0)
		key03.push(row['key03']>0?parseFloat(row['key03']):0)
		key05.push(row['key05']>0?parseFloat(row['key05']):0)
		key06.push(row['key06']>0?parseFloat(row['key06']):0)
	}) 
	console.log(key02)
	let sum02 = key02.length>0?key02.reduce(function(sum,i){
		return sum + i
	}):0
	let sum03 = key03.length>0?key03.reduce(function(sum,i){
		return sum + i
	}):0
	let sum05 = key05.length>0?key05.reduce(function(sum,i){
		return sum + i
	}):0
	let sum06 = key06.length>0?key06.reduce(function(sum,i){
		return sum + i
	}):0
	console.log(sum02,sum03,sum05,sum06)
	
	if(field == 'key04'){
		return `<div class="process_container">
								<div>
								<div class="process_bar">
									<div class="${sum02>0&&parseFloat(sum03/sum02)>1?'process exceed':'process'}" style="width:${sum02>0?sum03/sum02*72:0}px"></div>
								</div>
								<p>${sum02>0?(sum03/sum02 * 100).toFixed(2):0} %</p>
								</div>
							</div>`
	}
	if(field == 'key07'){
		return `<div class="process_container">
								<div>
								<div class="process_bar">
									<div class="${sum05>0&&parseFloat(sum06/sum05)>1?'process exceed':'process'}" style="width:${sum05>0?sum06/sum05 *72:0}px"></div>
								</div>
								<p>${sum05>0?(sum06/sum05 * 100).toFixed(2):0} %</p>
								</div>
							</div>`
	}
}
function footerStyle(column){
	return{
		name:{
			css:{'width':'160px'}
		}
	}[column.field]
}
function wyText(value){
	return `<p>${FormatWYCash(value)}</p>`
}
function blodText(value) {
	return `<h6>${value}</h6>`
}

function progress(value) {
	return `<div class="process_container">
								<div>
								<div class="process_bar">
									<div class="${parseFloat(value)>1?'process exceed':'process'}" style="width:${value*72}px"></div>
								</div>
								<p>${(value * 100).toFixed(2)} %</p>
								</div>
							</div>`
}
